{extend name="public/base" /}

{block name="content"}
<style>
    .per-list{
        cursor: default !important;
        padding:5px 0 5px 6px !important;
    }
    .per-list .item{
        margin-top: 5px;
        margin-left: 20px;
    }
    .per-list .item .comm{
        margin-left: 5px;
        font-weight: normal !important;
    }
</style>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div>
                        <a data-style="zoom-in" class="ladda-button btn btn-sm btn-primary btn-save" data-id="{$role_id}">保存</a>
                    </div>

                    <ul class="sortable-list connectList agile-list ui-sortable" id="todo">

                        {foreach $permissions as $k=>$v}
                        <li class="{$v.class} ui-sortable-handle left-line per-list">
                            <input type="checkbox" {if in_array($v['id'],$permission)}checked{/if} name="ids[]" data-id="{$v['id']}" id="check-{$v['id']}" class="check-all i-checks" value="{$v['id']}"> <label for="check-{$v['id']}">{$v['name']}</label>
                        </li>
                        {if !empty($v['child'])}
                        {foreach $v['child'] as $k1=>$v1}
                        <li class="per-list">
                            <input type="checkbox" {if in_array($v1['id'],$permission)}checked{/if} name="ids[]" data-id="{$v1['id']}" id="check-{$v1['id']}" value="{$v1['id']}" class="check-item-{$v['id']} check-first i-checks"> <label for="check-{$v1['id']}">{$v1['name']}</label>
                            <div class="item">
                                {if !empty($v1['sec_child'])}
                                {foreach $v1['sec_child'] as $k2=>$v2}
                                <input type="checkbox" {if in_array($v2['id'],$permission)}checked{/if} name="ids[]" value="{$v2['id']}" class="check-item-{$v['id']} check-first-item-{$v1['id']} i-checks" id="check-{$v2['id']}"><label for="check-{$v2['id']}" class="comm">{$v2['name']}</label>
                                {/foreach}
                                {/if}
                            </div>
                        </li>
                        {/foreach}
                        {/if}
                        {/foreach}

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    $(function(){

        $('.check-all').on('ifChecked', function(e){
            var id = $(this).val();
            $('.check-item-'+id).iCheck('check');
        });
        $('.check-all').on('ifUnchecked', function(e){
            var id = $(this).val();
            $('.check-item-'+id).iCheck('uncheck');
        });

        $('.check-first').on('ifChecked', function(e) {
            var id = $(this).val();
            $('.check-first-item-'+id).iCheck('check');
        });
        $('.check-first').on('ifUnchecked', function(e) {
            var id = $(this).val();
            $('.check-first-item-'+id).iCheck('uncheck');
        });

        $('.btn-save').click(function(){
            var l = Ladda.create(this);
            l.start();

            let ids = $('#todo').find('input').serialize();
            let role_id = $(this).attr('data-id');
            $.post('/admin/role/permission/store',{
                ids: ids,
                role_id: role_id
            },function(res){
                if (res.code == 0){
                    alertMsg(res.msg,'error',false);
                }else{
                    alertMsg(res.msg,'success',false);
                }
                l.stop();
            },'json')
        });
    });
</script>
{/block}